st/scroll-bar: Use an StWidget for the handle rather than a button

When we'll port the StScrollBar to use the new ClutterPanGesture, the
StButtons internal click gesture would interfere with the :active state of
the handle, because we set it in two places now: Here in StScrollBar, and in
StButton. Due to the order of gesture state changes when the scroll bar
handle pan gesture recognizes and cancels the button click gesture, the
active state will end up not being set during the actual pan.

To fix this, avoid using an StButton for the pan, and instead use a simple
StWidget.

While at it, change the CSS selector to be based on class name, not on ID.
IDs in CSS should be unique, and scroll bar handles are used more than once
in our UI.

Also, because apparently there's a Croco or St CSS parsing bug, select the
.vhandle/.hhandle class using the ">" child selector, as selecting just by
class doesn't do the trick :/

am

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2853>

diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index 85fc6dc94e5423cabe8b07c2fa52b06ad9738603..94e84bab360b2520fadbb2a9137ee595f23ae95f 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -256,7 +256,7 @@ $_gdm_dialog_width: 25em;
 
 // Notifications
 #unlockDialogNotifications {
-  StButton#vhandle, StButton#hhandle {
+  > .vhandle, > .hhandle {
     background-color: transparentize($bg_color,0.7);
     &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
     &:active { background-color: st-transparentize(-st-accent-color,0.5); }

diff --git a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
index 77cde6533de6a0332b2f7555520e7c02aee9d29f..1a7d17fc7d6c9674681c3821b25ba51f91f4f2ad 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
+++ b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
@@ -18,7 +18,7 @@ StScrollBar {
     background-color: transparent;
   }
 
-  StButton#vhandle, StButton#hhandle {
+  > .vhandle, > .hhandle {
     border-radius: 8px;
     background-color: mix($fg_color, $bg_color, 30%);
     border: 3px solid transparent; //would be nice to margin or at least to transparent

diff --git a/src/st/st-scroll-bar.c b/src/st/st-scroll-bar.c
index 9c2f4b54c9637eefb580a0798af482404bb87b7c..32dbcd7e39d2cbf9602e2e2625daa702ba3ab0f2 100644 (file)
--- a/src/st/st-scroll-bar.c
+++ b/src/st/st-scroll-bar.c
@@ -129,11 +129,10 @@ st_scroll_bar_set_orientation (StScrollBar        *bar,
   priv->orientation = orientation;
 
   if (priv->orientation == CLUTTER_ORIENTATION_VERTICAL)
-    clutter_actor_set_name (CLUTTER_ACTOR (priv->handle),
-                        "vhandle");
+    st_widget_set_style_class_name (ST_WIDGET (priv->handle), "vhandle");
   else
-    clutter_actor_set_name (CLUTTER_ACTOR (priv->handle),
-                        "hhandle");
+    st_widget_set_style_class_name (ST_WIDGET (priv->handle), "hhandle");
+
   clutter_actor_queue_relayout (CLUTTER_ACTOR (bar));
   g_object_notify_by_pspec (G_OBJECT (bar), props[PROP_ORIENTATION]);
 }
@@ -943,8 +942,10 @@ st_scroll_bar_init (StScrollBar *self)
   g_signal_connect (priv->trough, "leave-event",
                     G_CALLBACK (trough_leave_event_cb), self);
 
-  priv->handle = (ClutterActor *) st_button_new ();
-  clutter_actor_set_name (CLUTTER_ACTOR (priv->handle), "hhandle");
+  priv->handle = (ClutterActor *) g_object_new (ST_TYPE_WIDGET, NULL);
+  st_widget_set_track_hover (ST_WIDGET (priv->handle), TRUE);
+
+  st_widget_set_style_class_name (ST_WIDGET (priv->handle), "hhandle");
   clutter_actor_add_child (CLUTTER_ACTOR (self),
                            CLUTTER_ACTOR (priv->handle));
   g_signal_connect (priv->handle, "button-press-event",